// 我要找房
<template>
  <div>
    <el-form>
      <Header :currentCity="currentCity" :cityList="cityList"></Header>
      <Nav />
      <div id="FindRoom">
        <div class="FindRoom_wrap">
          <div class="FindRoom_wrap_li FindRoom_wrap_li1">
            <h4>
              <span>No.1</span>
              <span>您的需求是？(可多选）</span>
            </h4>
            <div class="FindRoom_wrap_li1_box">
              <div class="FindRoom_wrap_li1_left">
                <img
                  src="https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211019/ff97f841364e48df9611fdcde0a53707.png"
                  alt="您的需求是？"
                />
              </div>
              <div class="FindRoom_wrap_li1_right">
                <el-checkbox-group v-model="tagCode1" size="medium">
                  <el-checkbox-button
                    v-for="(item, index) in FindRoomList1"
                    :key="index"
                    :label="item.aliases"
                    name="type"
                  >{{ item.name }}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </div>
          </div>

          <div class="FindRoom_wrap_li FindRoom_wrap_li2">
            <h4>
              <span>No.2</span>
              <span>您的买房预算(以内)?(单选）</span>
            </h4>
            <div class="FindRoom_wrap_li1_box">
              <div class="FindRoom_wrap_li1_right">
                <el-radio-group v-model="tagCode2" size="medium" fill="#ff9800" text-color="#fff">
                  <el-radio-button
                    v-for="(item, index) in FindRoomList2"
                    :key="index"
                    :label="item.aliases"
                    name="type"
                    border
                  >{{ item.name }}</el-radio-button>
                </el-radio-group>
              </div>
              <div class="FindRoom_wrap_li1_left">
                <img
                  src="https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211019/6bac3e61ea4248aa96b36b2482f55aba.png"
                  alt="您的买房预算(以内)?"
                />
              </div>
            </div>
          </div>

          <div class="FindRoom_wrap_li FindRoom_wrap_li3">
            <h4>
              <span>No.3</span>
              <span>您的倾向户型是？(单选）</span>
            </h4>
            <div class="FindRoom_wrap_li1_box">
              <div class="FindRoom_wrap_li1_left">
                <img
                  src="https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211019/ca5ae586ec664096ab6049609be5bca9.png"
                  alt="您的倾向户型是？"
                />
              </div>
              <div class="FindRoom_wrap_li1_right">
                <el-radio-group v-model="tagCode3" size="medium" fill="#ff9800" text-color="#fff">
                  <el-radio-button
                    v-for="(item, index) in FindRoomList3"
                    :key="index"
                    :label="item.aliases"
                    name="type"
                    border
                  >{{ item.name }}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>

          <div class="FindRoom_wrap_li FindRoom_wrap_li4">
            <h4>
              <span>No.4</span>
              <span>面积不小于?(单选）</span>
            </h4>
            <div class="FindRoom_wrap_li1_box">
              <div class="FindRoom_wrap_li1_right">
                <el-radio-group v-model="tagCode4" size="medium" fill="#ff9800" text-color="#fff">
                  <el-radio-button
                    v-for="(item, index) in FindRoomList4"
                    :key="index"
                    :label="item.aliases"
                    name="type"
                  >{{ item.name }}</el-radio-button>
                </el-radio-group>
              </div>
              <div class="FindRoom_wrap_li1_left">
                <img
                  src="https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211019/0507020f9d6948d1b7fd4283e9f35a15.png"
                  alt="面积不小于？"
                />
              </div>
            </div>
          </div>

          <div class="FindRoom_wrap_li FindRoom_wrap_li5">
            <h4>
              <span>No.5</span>
              <span>您的喜欢的地段是？(单选）</span>
            </h4>
            <div class="FindRoom_wrap_li1_box FindRoom_wrap_li1_box5">
              <div class="FindRoom_wrap_li1_left">
                <img
                  src="https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211019/a5e848dff73543e8a93a63b295f0aede.png"
                  alt="您的喜欢的地段是？"
                />
              </div>
              <div class="FindRoom_wrap_li1_right">
                <el-radio-group v-model="tagCode5" size="medium" fill="#ff9800" text-color="#fff">
                  <el-radio-button
                    v-for="(item, index) in FindRoomList5"
                    :key="index"
                    :label="item.aliases"
                    name="type"
                  >{{ item.name }}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="FindRoom_wrap_li FindRoom_wrap_li6">
            <h4>
              <span>No.6</span>
              <span>您喜好的标签是?(可多选）</span>
            </h4>
            <div class="FindRoom_wrap_li_tabs">
              <el-tabs label="left" :tab-position="tabPosition" style="height: 120px">
                <el-tab-pane label="房屋">
                  <el-checkbox-group v-model="tagCode6" size="medium">
                    <el-checkbox-button
                      v-for="(item, index) in FindRoomList6"
                      :key="index"
                      :label="item.aliases"
                      name="type"
                    >{{ item.name }}</el-checkbox-button>
                  </el-checkbox-group>
                </el-tab-pane>
                <el-tab-pane label="小区">
                  <el-checkbox-group v-model="tagCode7" size="medium">
                    <el-checkbox-button
                      v-for="(item, index) in FindRoomList7"
                      :key="index"
                      :label="item.aliases"
                      name="type"
                    >{{ item.name }}</el-checkbox-button>
                  </el-checkbox-group>
                </el-tab-pane>
                <el-tab-pane label="设施">
                  <el-checkbox-group v-model="tagCode8" size="medium">
                    <el-checkbox-button
                      v-for="(item, index) in FindRoomList8"
                      :key="index"
                      :label="item.aliases"
                      name="type"
                    >{{ item.name }}</el-checkbox-button>
                  </el-checkbox-group>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>

          <div class="FindRoom_wrap_li7">
            <el-button @click="sbmit" round>查看结果</el-button>
          </div>
        </div>
      </div>
      <Footer :currentCity="currentCity"></Footer>
    </el-form>
  </div>
</template>

<script>
var head = {
  title: '', // 网页包头
  content: '我要找房，购房工具', // 网页描述
  keywords:
    '✖✖✖✖✖✖✖✖✖✖是新型的互联网新房导购平台，为您提供选房等特色购房工具。', // 网页关键词
}
import axios from 'axios'
import u from '@/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
    }
  },
  data() {
    return {
      tabPosition: 'left',
      tagCode1: [],
      tagCode2: '',
      tagCode3: '',
      tagCode4: '',
      tagCode5: '',
      tagCode6: [],
      tagCode7: [],
      tagCode8: [],
    }
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var FindRoomList1 = []
    var FindRoomList2 = []
    var FindRoomList3 = []
    var FindRoomList4 = []
    var FindRoomList5 = []
    var FindRoomList6 = []
    var FindRoomList7 = []
    var FindRoomList8 = []
    // 当前城市数据
    head.title = `我要找房 -【${currentCity.cityName}】✖✖✖✖✖✖✖✖✖✖`

    // 您的需求是
    let resp1 = await u.http({
      url: '/app/cfg/queryCfgDataByCmid',
      params: {
        cmId: 402,
      },
    })
    if (resp1.code == 200) {
      FindRoomList1 = resp1.data
    }
    // 您的买房预算(以内)
    let resp2 = await u.http({
      url: '/app/cfg/queryCfgDataByCmid',
      params: {
        cmId: 416,
      },
    })
    if (resp2.code == 200) {
      FindRoomList2 = resp2.data
    }
    // 您的倾向户型是？
    let resp3 = await u.http({
      url: '/app/cfg/queryCfgDataByCmid',
      params: {
        cmId: 410,
      },
    })
    if (resp3.code == 200) {
      FindRoomList3 = resp3.data
    }
    // 面积不小于?
    let resp4 = await u.http({
      url: '/app/cfg/queryCfgDataByCmid',
      params: {
        cmId: 413,
      },
    })
    if (resp4.code == 200) {
      FindRoomList4 = resp4.data
    }
    // 您的喜欢的地段是？
    let resp5 = await u.http({
      url: '/app/district/queryRegionByCityCode',
      params: {
        cityCode: currentCity.cityCode,
      },
    })
    if (resp5.code == 200) {
      FindRoomList5 = resp5.data
    }

    // 您喜好的标签是?房屋
    let resp6 = await u.http({
      url: '/app/cfg/queryCfgDataByCmid',
      params: {
        cmId: 407,
      },
    })
    if (resp6.code == 200) {
      FindRoomList6 = resp6.data
    }

    // 您喜好的标签是?小区
    let resp7 = await u.http({
      url: '/app/cfg/queryCfgDataByCmid',
      params: {
        cmId: 403,
      },
    })
    if (resp7.code == 200) {
      FindRoomList7 = resp7.data
    }

    // 您喜好的标签是?设施
    let resp8 = await u.http({
      url: '/app/cfg/queryCfgDataByCmid',
      params: {
        cmId: 405,
      },
    })
    if (resp8.code == 200) {
      FindRoomList8 = resp8.data
    }

    return {
      prefixUrl,
      currentCity,
      cityList,
      FindRoomList1,
      FindRoomList2,
      FindRoomList3,
      FindRoomList4,
      FindRoomList5,
      FindRoomList6,
      FindRoomList7,
      FindRoomList8
    }
  },
  methods: {
    sbmit() {
      var tagCode_List1,
        tagCode_List6,
        tagCode_List7,
        tagCode_List8,
        tagCode_ListAll = [],
        tagCode_route,
        tagCode_cont = []

      if (this.tagCode1) {
        tagCode_List1 = this.tagCode1.join('_')
      }
      if (this.tagCode6) {
        tagCode_List6 = this.tagCode6.join('_')
      }
      if (this.tagCode7) {
        tagCode_List7 = this.tagCode7.join('_')
      }
      if (this.tagCode8) {
        tagCode_List8 = this.tagCode8.join('_')
      }
      tagCode_ListAll.push(
        tagCode_List1,
        this.tagCode2,
        this.tagCode3,
        this.tagCode4,
        this.tagCode5,
        tagCode_List6,
        tagCode_List7,
        tagCode_List8
      )

      tagCode_ListAll.forEach((item) => {
        if (item != '') {
          tagCode_cont.push(item)
        }
      })
      tagCode_route = tagCode_cont.join('-')
      // 202111141607 sry
      window.open(`${this.prefixUrl}/lpcx/${tagCode_route}`)
    },
  },
}
</script>